import type { CreateCrudOptionsProps, CreateCrudOptionsRet, DataFormatterContext } from '@fast-crud/fast-crud'
import { asyncCompute, compute } from '@fast-crud/fast-crud'
import { delRequest, pageRequest, addRequest, editRequest, getDetail } from './api'
import dayjs from 'dayjs'
/**
 * 定义行数据模型
 * 如果你嫌定义数据模型麻烦，可以删掉此处，把下面出现的Row用any代替即可
 */
// export type Row = {
//   id: string
//   userName: string
//   createdDate: string
//   password: string
// }
const selectedIds = ref([])
const onSelectionChange = (changed: any) => {
  selectedIds.value = changed.map((item: any) => item.id)
}
/**
 * 定义一个CrudOptions生成器方法
 */
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  context.selectedIds = selectedIds
  return {
    crudOptions: {
      // 在这里自定义你的crudOptions配置
      request: {
        addRequest,
        pageRequest,
        delRequest,
        editRequest,
      },
      table: {
        rowKey: 'id',
        onSelectionChange,
      },
      // rowHandle: {
      //   buttons: {
      //     edit: {
      //       click(context) {
      //         router.push('/articleEdit?id=' + context.row.id)
      //       },
      //     },
      //   },
      // },
      toolbar: {
        buttons: {
          export: {
            show: true,
          },
        },
        export: {
          filename: 'article',
          autoUseDictLabel: false,
          dataFrom: 'search',
          fileType: 'excel',
          dataFormatter: (opts: DataFormatterContext) => {
            opts.exportCol.title = opts.key
            if (opts.col.key === 'createdDate' && opts.originalRow.createdDate) {
              opts.row.createdDate = dayjs(opts.originalRow.createdDate).format('YYYY-MM-DD HH:mm:ss')
            }
            // 此方法里面要做的是修改row里面的数据
            // { row, originalRow, col } :DataFormatterContext
            //例如 格式化日期
            // if (opts.col.key === 'date' && opts.originalRow.date) {
            //   opts.row.date = dayjs(opts.originalRow.date).format('YYYY-MM-DD HH:mm:ss')
            // }
            //参数说明
            // DataFormatterContext = {row: any,originalRow: any, key: string, col: ColumnProps, exportCol:ExportColumn}
            // row = 当前行数据
            // originalRow = 当前行原始数据
            // key = 当前列的key
            // col = 当前列的配置
            // exportCol = 当前列的导出配置
          },
        },
      },
      form: {
        wrapper: {
          size: '70%',
          is: 'el-drawer',
        },
      },
      //这里定义两个字段
      columns: {
        $checked: {
          title: '选择',
          form: { show: false },
          column: {
            exportable: false,
            type: 'selection',
            align: 'center',
            width: '55px',
            columnSetDisabled: true, //禁止在列设置中选择
            // selectable(row: any) {
            //   return row.id !== 1 //设置第一行不允许选择
            // },
          },
        },
        id: {
          title: 'ID',
          search: {
            show: true,
            component: {
              //查询 使用选择框组件，并且是可以清除的
              name: 'el-input',
              clearable: true,
            },
          },
          addForm: { show: false }, // 不在新增表单中展示
          editForm: { show: false }, // 不在编辑表单中展示
          viewForm: { show: false },
        },
        title: {
          title: '标题',
          type: 'text', //字段类型，fs会根据字段类型，生成出一些默认配置
          search: { show: true },
          // column: {
          //   //表格列的一些配置
          //   resizable: true,
          // },
          // component: {
          //   clearable: true,
          // },
          form: {
            rules: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
          },
        },
        intro: {
          title: '简介',
          form: {
            rules: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
          },
        },
        content: {
          title: '内容',
          column: {
            show: false,
          },
          form: {
            component: {
              name: 'fs-editor-wang5',
              style: { zIndex: 800 },
              toolbarAttrs: { style: { zIndex: 800 } },
              props: {
                // 异步（接口）获取字段值 ！！！
                modelValue: asyncCompute({
                  //没有配置watch，只会触发一次
                  asyncFn: async (watchValue, context: any) => {
                    if (context?.row?.id) {
                      const res = await getDetail(context.row.id)
                      return (res.data as { articleContent: { content: string } }).articleContent.content
                    } else {
                      return ''
                    }
                  },
                }),
              },
            },
            col: {
              span: 24,
            },
            rules: [
              {
                trigger: 'blur',
                required: true,
                message: '内容不能为空',
                validator: async (rule, value) => {
                  if (value.trim() === '<p><br></p>') {
                    throw new Error('内容不能为空')
                  }
                },
              },
            ],
          },
          // component: {
          //   disabled: compute(({ form }: any) => {
          //     return form.disabled
          //   }),
          //   id: '1', // 当同一个页面有多个editor时，需要配置不同的id
          //   config: {},
          //   uploader: {
          //     type: 'form',
          //     buildUrl(res: any) {
          //       return res.url
          //     },
          //   },
          // },
        },
      },
    },
  }
}
